<template>
	<div class="home">
		<el-container>
			<el-aside :style="{'width':zhedie?'0':'320px'}">
				<div class="mean">
					<div class="icon">
						<img src="../assets/logo.png" width="50" height="50" alt="" srcset="" />

					</div>
					<div class="meanList">
						<div class="meanXys" v-for="(item,index) in meanData" :class="{active:index==active}"
							@click="active=index">
							<img :src="require(index==active?'../assets/sidebar_chat_pre@3x.png':'../assets/sidebar_chat_nor@3x.png') "
								width="30" height="30" alt="" srcset="" />
							<span>{{item.name}}</span>
						</div>
					</div>
					<div class="loginAndVip">

					</div>
				</div>
				<div class="right-aside">
					<div class="r-as-top">
						<img v-if="!zhedie" @click="zhedie = !zhedie" src="../assets/ic_sidebar@2x.png" width="50"
							height="50" alt="" srcset="" />
					</div>
					<div class="r-as-mid dwFlex">
						<div class="chatList" v-for="(item,index) in chatData" :class="{chatActive:index==chatActive}"
							@click="choseDqChat(item,index)">
							<div class="xrq">

								<img :src="require(index==chatActive?'../assets/sidebar_talk_list@2x.png':'../assets/sidebar_talk_list@3x.png') "
									alt="" />
								<span>{{item.name}}</span>
							</div>

							<img class="editIcon" v-show="index==chatActive" src="../assets/sidebar_talk_eidt@2x.png"
								alt="" />
							<img class="scIcon" v-show="index==chatActive" src="../assets/sidebar_talk_del@2x.png"
								alt="" />
						</div>
					</div>
					<div class="r-as-bot dwFlex">
						<button class="deflex2" @click="creatChat">
							<img src="../assets/sidebar_talk_add@2x.png" width="20" height="20" alt="" />
							<span class="green">新建对话</span>
						</button>
						<button @click="clearChat" class="deflex2">
							<img src="../assets/sidebar_function_del@2x.png" width="20" height="20" alt="" />
							<span>清空对话</span>
						</button>
					</div>
				</div>

			</el-aside>
			<el-container>
				<el-header>
					<img v-if="zhedie" @click="zhedie = !zhedie" src="../assets/ic_sidebar@2x.png" width="50"
						height="50" alt="" srcset="" />

				</el-header>
				<el-main>
					<div class="chatBox" v-for="(item,index) in dangqianChat.children">
						<div style="" class="box-child">
							<img :src="item.name=='ai'?require('../assets/logo.png'):require('../assets/head_cquestion@3x.png')  "
								alt="" />
							<pre  v-html="item.query" > </pre>
						</div>
					</div>
					<img class="iconCh" width="200" v-if="!dangqianChat.children" src="../assets/talk_gai@3x.png"
						alt="" />
				</el-main>
				<el-footer>
					<div class="foot-1">
						<textarea @keyup.enter="sendChat()" v-model="chatForm.query" class="el-textarea__inner"
							tabindex="0" autocomplete="off" placeholder="你想问什么？" id="el-id-4191-15"
							style="min-height: 32px; height: 32px;"></textarea>
						<img @click="sendChat()" width="50" height="50" src="../assets/ic_send_dis@3x.png" alt="" />
					</div>

				</el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import {
		getChat,
		uploadDocument,
		uploadImg,
		chatAndImg,
		getChatByDocument
	} from '../api/chat.js'
	// @ is an alias to /src
	import HelloWorld from '@/components/HelloWorld.vue'

	export default {
		name: 'HomeView',
		components: {
			HelloWorld
		},
		data() {
			return {
				originalText: "",
				typingIndex: 0,
				typingInterval: null,
				zhedie: false,
				dangqianChat: {
					children: ''
				},
				chatData: [],
				active: 0,
				chatActive: 0,
				chatForm: {
					query: ''
				},
				meanData: [{
						name: '聊天',
						icon: 'chat'
					},
					{
						name: '绘画',
						icon: 'paint'
					},
					{
						name: '创作',
						icon: 'make'
					},
					{
						name: '助理',
						icon: 'helper'
					},
					{
						name: '视频',
						icon: 'video'
					},
					{
						name: 'PPT生成',
						icon: 'ppt'
					},

				]
			}
		},
		methods: {
			choseDqChat(row, index) {
				this.chatActive = index
				this.dangqianChat = row

			},
			creatChat() {
				this.chatData.push({
					children: [],
					name: '新建对话'
				})
				console.log(this.chatData.length)
				this.chatActive = this.chatData.length - 1
				this.dangqianChat = this.chatData
				console.log(898)
			},
			clearChat() {
				this.chatData = []
				this.dangqianChat = []
				this.chatActive = 0
			},
			sendChat() {
				const isEmptyOrSpacesOnly = /^\s*$/.test(this.chatForm.query);
				if (isEmptyOrSpacesOnly) {
					this.$message({
						message: '请输入内容！',
						type: 'warning'
					});
				} else {
					if (this.chatData.length <= 0) {
						this.chatData.push({
							children: [],
							name: this.chatForm.query
						})
					}
					let objme = {
						name: 'me',
						query: this.chatForm.query
					}
					let objai = {
						name: 'ai',
						query: ''
					}
					// this.chatData[this.chatActive].children = []
					this.chatData[this.chatActive].children.push(objme)
					this.chatData[this.chatActive].children.push(objai)
					this.dangqianChat = this.chatData[this.chatActive]

					let obj = {
						query: this.chatForm.query,

						stream: false,
						model_name: "Qwen1.5-1.8B-Chat",
						temperature: 0.7,
						max_tokens: 0,
						prompt_name: "default",

					}
					getChat(obj).then((res) => {

						let subStr = res.substring(5);
						subStr = JSON.parse(subStr).text
						let strForHTML = JSON.stringify(subStr.replace(/\n/g, '<br>'));
						this.originalText = strForHTML
						// this.originalText = new MarkdownIt().render(subStr)
						this.startTyping()
						this.chatForm.query = ''
						console.log(res)

					})




					return







					this.chatArr.push({
						img: this.imageUrl ? this.imageUrl : '',
						name: 'me',
						query: this.chatForm.query
					})
					this.chatArr.push({
						name: 'ai',
						query: ''
					})
					this.$nextTick(() => {

						this.scrollToBottom()
					})
					console.log(this.chatArr)

					//判断是聊天还是图片还是文档
					if ((this.imageUrl || this.uploadedFile) && !this.isLoading) {

						if (this.imageUrl) {
							//进入图片的分析中
							let obj = {
								q: this.chatForm.query,
								img_id: this.chatForm.img_id
							}
							chatAndImg(obj).then((res) => {
								if (res.img_url) {

									this.chatArr[this.chatArr.length - 1].img = res.img_url
									console.log('有图片')
								}
								this.originalText = res.msg
								this.startTyping()
							})



						} else if (this.uploadedFile) {
							//进入文档的分析中
							let obj = {
								query: this.chatForm.query,
								knowledge_id: this.chatForm.knowledge_id,
								top_k: 3,
								score_threshold: 1,
								stream: false,
								model_name: "Qwen1.5-1.8B-Chat",
								temperature: 0.7,
								max_tokens: 0,
								prompt_name: "default"
							}
							console.log(obj)
							getChatByDocument(obj).then((res) => {
								let subStr = res.substring(5);
								subStr = JSON.parse(subStr).answer
								let strForHTML = JSON.stringify(subStr.replace(/\n/g, '<br>'));
								this.originalText = strForHTML
								// this.originalText = new MarkdownIt().render(subStr)
								this.startTyping()
							})

						} else {

						}

					} else if (this.isLoading) {
						this.$message({
							message: '文件上传中，请稍等！',
							type: 'warning'
						});

					} else {
						// alert('纯聊天')
						let obj = {
							query: this.chatForm.query,

							stream: false,
							model_name: "Qwen1.5-1.8B-Chat",
							temperature: 0.7,
							max_tokens: 0,
							prompt_name: "default",

						}
						getChat(obj).then((res) => {

							let subStr = res.substring(5);
							subStr = JSON.parse(subStr).text
							let strForHTML = JSON.stringify(subStr.replace(/\n/g, '<br>'));
							this.originalText = strForHTML
							// this.originalText = new MarkdownIt().render(subStr)
							this.startTyping()
							console.log(res)

						})
					}
				}
				this.chatForm.query = ''
				this.typingIndex = 0

				return




			},
			startTyping() {
				// 清除之前的打字间隔  
				clearInterval(this.typingInterval);
			
				// 开始新的打字间隔  
				this.typingInterval = setInterval(() => {
					// 如果已经打完了所有的字，就停止打字  
					if (this.typingIndex >= this.originalText.length) {
						clearInterval(this.typingInterval);
					} else {
						// 否则，每次添加一个字符  
						let lastObject = this.dangqianChat.children[this.dangqianChat.children.length - 1];
						lastObject.query += this.originalText[this.typingIndex++];
					}
					// this.scrollToBottom()
				}, 10); // 这里设置打字速度为每100毫秒一个字符  
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.dwFlex {
		display: flex;
		flex-flow: column;
		align-items: center;
		width: 236px;
	}

	.deflex2 {
		display: flex;
		flex-flow: row;
		align-items: center;
		width: 90%;
		border: none;
		padding: 15px 20px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 10px;
		justify-content: center;
		cursor: pointer;

		img {
			margin-right: 15px;
		}

		span {
			font-size: 14px;
		}

		margin-bottom: 10px;

		.green {
			color: #10A37f;
		}
	}

	.right-aside {
		width: 15rem;
		height: 100%;
		border-right: 1px solid #d3d3d3;
		display: flex;
		flex-flow: column;

		.r-as-bot {}

		.r-as-top {
			img {
				cursor: pointer;
			}
		}

		.r-as-mid {
			flex: 0.95;

			.chatList {
				.xrq {
					display: flex;
					align-items: center;
					padding: 10px 0;
					font-size: 14px;
					margin: 0 20px;

					img {
						margin-right: 10px;
						width: 20px !important;
						height: 25px !important;
					}
				}

				display: flex;
				width: 90%;
				justify-content: flex-start;
				align-items: center;

				img {
					width: 35px;
					height: 35px;
				}
			}

			.scIcon,
			.editIcon {
				cursor: pointer;
			}
		}
	}

	.chatList:hover {
		background: #e2f3ef;
	}

	.chatActive {
		background: #e2f3ef;
		color: #10a37f
	}

	.el-container {
		height: 100vh;
	}

	.active {
		background: #34363d;
		border-radius: 10px;
		color: #fff !important;
	}

	.mean {
		background: #1e2027;
		height: 100%;
		width: 5rem;
		display: flex;
		flex-flow: column;

		// all: initial;
	}

	.icon {
		padding: 20px 10px;
		text-align: center;

		img {
			object-fit: fill;
			border-radius: 10px;
		}
	}

	.meanList {
		div {
			display: flex;
			flex-flow: column;
			align-items: center;
			cursor: pointer;
			color: #979797;
			margin: 4px 11px 0;
			padding: 8px 4px;

		}

		div:hover {
			background: #34363d;
			border-radius: 10px;
			color: #fff !important;
		}


		font-size: 12px;

		display: flex;
		flex-flow: column;
	}

	.el-header {
		background-color: #f6f6f6;
		color: #333;
		text-align: center;
		height: 50px !important;
		line-height: 50px;
		border: 1px solid #e5e7eb;
		display: flex;

		img {
			cursor: pointer;
		}
	}

	.el-footer {
		background-color: #f6f6f6;
		padding: 30px 200px;
		height: unset !important;
	}

	.el-aside {
		display: flex;
		background-color: #f6f6f6;
		transition: width .5s ease-in-out;
		/* 宽度过渡动画 */
		overflow: hidden;
		// color: #333;
		// text-align: center;
		// line-height: 200px;

	}

	.el-main {
		background-color: #f6f6f6;
		color: #333;
		text-align: center;
		padding: 0 !important;
		position: relative;

		.iconCh {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			/* 或者左右居中 */
			left: 50%;
			transform: translate(-50%, -50%);
		}

		// line-height: 160px;
		.chatBox:nth-child(odd) {
			background: #fff;
			border: 1px solid #e5e7eb;
		}

		.chatBox:nth-child(even) {
			background: #f6f6f6;
			border: 1px solid #e5e7eb;
		}

		.box-child {
			padding: 20px 0;
			max-width: 908px;
			margin: 0 auto;
			display: flex;
			align-items: center;

			img {
				width: 40px;
				height: 40px;
				margin-right: 20px;
			}
			pre{
				font-size: 16px;
			}

		}
	}

	.el-textarea__inner {
		min-height: 32px;
		height: 32px;
		box-shadow: none;
		resize: none;
		padding: 5px 0;
		scrollbar-width: none;
		line-height: 22px;
		font-weight: 400;
		font-size: 16px;
		margin: 14px 0;


		position: relative;
		display: block;


		box-sizing: border-box;
		width: 100%;

		font-family: inherit;
		color: #606266;
		background-color: #fff;
		background-image: none;
		-webkit-appearance: none;

		border-radius: 10px;
		transition: box-shadow .2s cubic-bezier(.645, .045, .355, 1);
		border: none;
	}

	.foot-1 {
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .15s;
		height: 60px;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		flex-flow: row;
		align-items: center;
		padding: 0 20px;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .3);

		img {
			cursor: pointer
		}

	}

	.foot-1:hover {
		box-shadow: (0 0 #0000, 0 0 #0000), (0 0 #0000, 0 0 #0000), (0 1px 6px 0 rgba(0, 0, 0, 3));
	}

	// body>.el-container {
	// 	margin-bottom: 40px;

	// }

	// .el-container:nth-child(5) .el-aside,
	// .el-container:nth-child(6) .el-aside {
	// 	line-height: 260px;
	// }

	// .el-container:nth-child(7) .el-aside {
	// 	line-height: 320px;
	// }
</style>